<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>flex弹性布局</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="../../../libs/bootstrap4/css/bootstrap.css">-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <style>
        body>div{
            margin-bottom: 50px;
        }
    </style>
</head>
<body>

<div class="container mt-3">
    <h2>Flex</h2>
    <p>使用 d-flex 类创建 display:flex 容器</p>
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>


<div class="container mt-3">
    <h2>行内 Flex</h2>
    <p>使用 d-inline-flex 类创建 display:inline-flex 容器</p>
    <div class="d-inline-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>


<div class="container mt-3">
    <h2>水平方向</h2>
    <p>使用 .flex-row 类设置弹性子元素水平显示：</p>
    <div class="d-flex flex-row bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <p>.flex-row-reverse 设置右对齐方向:</p>
    <div class="d-flex flex-row-reverse bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>

<div class="container mt-3">
    <h2>垂直方向</h2>
    <p>.flex-column 类用于设置弹性子元素垂直方向显示：</p>
    <div class="d-flex flex-column mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <p>.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示：</p>
    <div class="d-flex flex-column-reverse">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
<div class="container mt-3">
    <h2>内容排列方式</h2>
    <p> .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:</p>
    <div class="d-flex justify-content-start bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-end bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-center bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-between bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-around bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
<div class="container mt-3">
    <h2>等宽</h2>
    <p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</p>
    <div class="d-flex mb-3">
        <div class="p-2 flex-fill bg-info">Flex item 1</div>
        <div class="p-2 flex-fill bg-warning">Flex item 2</div>
        <div class="p-2 flex-fill bg-primary">Flex item 3</div>
    </div>
    <p>不使用 .flex-fill 类实例:</p>
    <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
<div class="container mt-3">
    <h2>扩展</h2>
    <p>.flex-grow-1 用于设置子元素使用剩下的空间：</p>
    <div class="d-flex mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
    </div>
    <p>不使用 .flex-grow-1 实例:</p>
    <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>

<div class="container mt-3">
    <h2>排序</h2>
    <p>.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高:</p>
    <div class="d-flex mb-3">
        <div class="p-2 order-3 bg-info">Flex item 1</div>
        <div class="p-2 order-2 bg-warning">Flex item 2</div>
        <div class="p-2 order-1 bg-primary">Flex item 3</div>
    </div>
</div>

<div class="container mt-3">
    <h2>外边距</h2>
    <p>.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto，</p>
    <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 mr-auto bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex mb-3 bg-secondary">
        <div class="p-2  bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 ml-auto bg-primary">Flex item 3</div>
    </div>
</div>

<div class="container mt-3">
    <h2>包裹</h2>
    <p>弹性容器中包裹弹性子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse:</p>
    <p><code>.flex-wrap:</code></p>
    <div class="d-flex flex-wrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p><code>.flex-wrap-reverse:</code></p>
    <div class="d-flex flex-wrap-reverse bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p><code>.flex-nowrap:</code></p>
    <div class="d-flex flex-nowrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
        <div class="p-2 border">Flex item 26</div>
        <div class="p-2 border">Flex item 27</div>
        <div class="p-2 border">Flex item 28</div>
        <div class="p-2 border">Flex item 29</div>
        <div class="p-2 border">Flex item 30</div>
        <div class="p-2 border">Flex item 31</div>
        <div class="p-2 border">Flex item 32</div>
        <div class="p-2 border">Flex item 33</div>
        <div class="p-2 border">Flex item 34</div>
        <div class="p-2 border">Flex item 35</div>
    </div>
    <br>
</div>
<div class="container mt-3">
    <h2>内容对齐</h2>
    <p>我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。</p>
    <p><strong>注意:</strong> 这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。</p>
    <p>.align-content-start (默认):</p>
    <div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-end:</p>
    <div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-center:</p>
    <div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-around:</p>
    <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-stretch:</p>
    <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13 </div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
</div>

<div class="container mt-3">
    <h2>子元素对齐</h2>
    <p>如果要设置单行的子元素对齐可以使用 .align-content-* 类来控制。</p>
    <p>.align-items-start:</p>
    <div class="d-flex align-items-start bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-end:</p>
    <div class="d-flex align-items-end bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-center:</p>
    <div class="d-flex align-items-center bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-baseline:</p>
    <div class="d-flex align-items-baseline bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-stretch (默认):</p>
    <div class="d-flex align-items-stretch bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
</div>

<div class="container">
    <h2>响应式 flex 类</h2>
    <p>
    我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。
    </p>
    <table class="reference">
        <tbody><tr>
            <th style="width:34%;">类</th>
            <th>实例</th>
            <th>实现</th>
        </tr>
        <tr>
            <td colspan="3">弹性容器</td>
        </tr>
        <tr>
            <td><code>.d-*-flex</code></td>
            <td>根据不同的屏幕设备创建弹性盒子容器</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.d-*-inline-flex</code></td>
            <td>根据不同的屏幕设备创建行内弹性盒子容器</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-inline-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">方向</td>
        </tr>
        <tr>
            <td><code>.flex-*-row</code></td>
            <td>根据不同的屏幕设备在水平方向显示弹性子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-row-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.flex-*-row-reverse</code></td>
            <td>根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-row-reverse-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.flex-*-column</code></td>
            <td>根据不同的屏幕设备在垂直方向显示弹性子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-column-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.flex-*-column-reverse</code></td>
            <td>根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-column-reverse-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">内容对齐</td>
        </tr>

        <tr>
            <td><code>.justify-content-*-start</code></td>
            <td>根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-justify-start-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.justify-content-*-end</code></td>
            <td>根据不同屏幕设备在尾部显示弹性子元素 (右对齐) </td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-justify-end-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.justify-content-*-center</code></td>
            <td>根据不同屏幕设备在 flex 容器中居中显示子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-justify-center-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.justify-content-*-between</code></td>
            <td>根据不同屏幕设备使用  "between" 显示弹性子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-justify-between-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.justify-content-*-around</code></td>
            <td>根据不同屏幕设备使用  "around" 显示弹性子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-justify-around-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>



        <tr>
            <td colspan="3">等宽</td>
        </tr>

        <tr>
            <td><code>.flex-*-fill</code></td>
            <td>根据不同的屏幕设备强制等宽</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-fill-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">扩展</td>
        </tr>
        <tr>
            <td><code>.flex-*-grow-0</code></td>
            <td>不同的屏幕设备不设置扩展</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><code>.flex-*-grow-1</code></td>
            <td>不同的屏幕设备设置扩展</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">收缩</td>
        </tr>
        <tr>
            <td><code>.flex-*-shrink-0</code></td>
            <td>不同的屏幕设备不设置收缩</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><code>.flex-*-shrink-1</code></td>
            <td>不同的屏幕设备设置收缩</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">包裹</td>
        </tr>
        <tr>
            <td><code>.flex-*-nowrap</code></td>
            <td>不同的屏幕设备不设置包裹元素</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-nowrap-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.flex-*-wrap</code></td>
            <td>不同的屏幕设备设置包裹元素</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-wrap-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.flex-*-wrap-reverse</code></td>
            <td>不同的屏幕设备反转包裹元素</td>
            <td>
                <a href="/try/try.php?filename=trybs4_flex-wrap-reverse-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>

        <tr>
            <td colspan="3">内容排列</td>
        </tr>
        <tr>
            <td><code>.align-content-*-start</code></td>
            <td>根据不同屏幕设备在起始位置堆叠元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-content-start-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-content-*-end</code></td>
            <td>根据不同屏幕设备在结束位置堆叠元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-content-end-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-content-*-center</code></td>
            <td>根据不同屏幕设备在中间位置堆叠元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-content-center-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-content-*-around</code></td>
            <td>根据不同屏幕设备，使用 "around" 堆叠元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-content-around-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-content-*-stretch</code></td>
            <td>根据不同屏幕设备，通过伸展元素来堆叠</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-content-stretch-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">元素对齐</td>

        </tr>
        <tr>
            <td><code>.align-items-*-start</code></td>
            <td>根据不同屏幕设备，让元素在头部显示在同一行。</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-items-start-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-items-*-end</code></td>
            <td>根据不同屏幕设备，让元素在尾部显示在同一行。</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-items-end-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-items-*-center</code></td>
            <td>根据不同屏幕设备，让元素在中间位置显示在同一行。</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-items-center-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-items-*-baseline</code></td>
            <td>根据不同屏幕设备，让元素在基线上显示在同一行。</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-items-baseline-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-items-*-stretch</code></td>
            <td>根据不同屏幕设备，让元素延展高度并显示在同一行。</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-items-stretch-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">单独一个子元素的对齐方式</td>

        </tr>
        <tr>
            <td><code>.align-self-*-start</code></td>
            <td>据不同屏幕设备，让单独一个子元素显示在头部。 </td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-self-start-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-self-*-end</code></td>
            <td>据不同屏幕设备，让单独一个子元素显示在尾部</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-self-end-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-self-*-center</code></td>
            <td>据不同屏幕设备，让单独一个子元素显示在居中位置</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-self-center-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-self-*-baseline</code></td>
            <td>据不同屏幕设备，让单独一个子元素显示在基线位置</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-self-baseline-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>
        <tr>
            <td><code>.align-self-*-stretch</code></td>
            <td>据不同屏幕设备，延展一个单独子元素</td>
            <td>
                <a href="/try/try.php?filename=trybs_flex-align-self-stretch-responsive" class="tryitbtn" target="_blank">尝试一下</a>
            </td>
        </tr>


        </tbody></table>
</div>

<script>
    var elAs = document.getElementsByClassName("reference")[0].getElementsByTagName("a");
    for (let i = 0;i<elAs.length;i++){
        let a = elAs[i];
        let index = a.href.indexOf("/try/try.php");
        a.href = "http://www.runoob.com"+ a.href.substring(index,a.href.length);
    }
</script>
</body>
</html>